<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}" />
    <title>全部节目管理</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <!--<link rel="stylesheet" th:href="@{/lib/daterangepicker/daterangepicker.css}">-->
</head>

<body>

    <div class="app-page">

        <div class="app-page-content">

            <div class="app-card">
                <div class="app-card-body">
                    <div class="app-card-body-con">
                        <!-- 过滤器 -->
                        <form class="filter">

                            <div class="filter-group">
                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label"><label>状态</label></div>
                                        <div class="body">
                                            <select name="programStatus">
                                            <option value="">全部</option>
                                            <option value="2" th:selected="2 == ${programStatus}">待发布</option>
                                            <option value="1" th:selected="1 == ${programStatus}">待审批</option>
                                            <option value="0" th:selected="0 == ${programStatus}">已审批</option>
                                            <option value="3" th:selected="3 == ${programStatus}">已过期</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label"><label>商家</label></div>
                                        <div class="body">
                                            <select name="companyCode">
                                            <option value="">全部</option>
                                            <option th:each="company:${companySelectList}"
                                                    th:selected="${companyCode == company.companyCode}"
                                                    th:value="${company.companyCode}"
                                                    th:text="${company.companyName}">
                                            </option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label"><label>节目名称</label></div>
                                        <div class="body">
                                            <input type="text" placeholder="节目名称" name="programName" th:value="${programName}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-group">
                                <div class="filter-item">
                                    <div class=" form-item row">
                                        <div class="label"><label>更新开始时间</label></div>
                                        <div class="body">
                                            <input type="text" placeholder="结束时间" name="startTime" class="fp-time" th:value="${startTime}">
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label"><label>更新结束时间</label></div>
                                        <div class="body">
                                            <input type="text" placeholder="结束时间" name="endTime" class="fp-time" th:value="${endTime}">
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-item">
                                    <button class="z-btn z-primary">查询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="app-card">
                <div class="app-card-body">
                    <div class="app-card-body-con">

                        <div class="z-btn-group z-ta-r">
                            <button data-state="3" class="j-btn-control z-btn z-default edit-dept" data-editDept id="exportCkProgram">导出
                        </button>
                        </div>

                        <table class="z-table">
                            <thead>
                                <th>
                                    <input type="checkbox" class="input j-checkbox-all">
                                </th>
                                <th>节目ID</th>
                                <th>节目名称</th>
                                <th>节目时长（S）</th>
                                <th>状态</th>
                                <th>更新时间</th>
                                <th>已下载终端数</th>
                                <th>下载失败终端数</th>
                                <th>下载终端总数</th>
                            </thead>
                            <tbody>
                                <tr th:each="program: ${result}" th:attr="
                            data-program-id=${program.programId},
                            data-program-name=${program.programName},
                            data-program-duration=${program.programDuration},
                            data-program-status=${program.programStatus},
                            data-update-time=${program.updateTime},
                            data-downloaded-device-num=${program.downloadedDeviceNum},
                            data-download-fail-device-num=${program.downloadFailDeviceNum},
                            data-download-device-sum=${program.downloadDeviceSum}">
                                    <td>
                                        <input type="checkbox" class="input j-checkbox">
                                    </td>
                                    <td th:text="${program.programId}"></td>
                                    <td th:text="${program.programName}"></td>
                                    <td th:text="${program.programDuration == null?'':#numbers.formatDecimal((program.programDuration/1000.0), 0, 2)}"></td>
                                    <td th:text="${program.programStatus}"></td>
                                    <td th:text="${program.updateTime}"></td>
                                    <td th:text="${program.downloadedDeviceNum}"></td>
                                    <td th:text="${program.downloadFailDeviceNum}"></td>
                                    <td th:text="${program.downloadDeviceSum}"></td>
                                </tr>
                            </tbody>
                        </table>

                        <!-- 分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script th:src="@{/lib/jquery.min.js}"></script>
    <script th:src="@{/js/popup.js}"></script>
    <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
    <script th:src="@{/js/form.js}"></script>
    <script th:src="@{/js/admin/app.js}"></script>
    <script th:src="@{/js/pagination.js}"></script>
    <!--<script th:src="@{/lib/daterangepicker/moment.min.js}"></script>-->
    <!--<script th:src="@{/lib/daterangepicker/daterangepicker.js}"></script>-->
    <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
    <script th:src="@{/lib/flatpickr/zh.js}"></script>
    <script>
        var context = $("meta[name='ctx']").attr("content") || '';
        //处理分页
        var pageNum = '[[${pageNum}]]';
        var pageSize = '[[${pageSize}]]';
        var total = '[[${total}]]';
        var startTime = '[[${startTime}]]';
        var endTime = '[[${endTime}]]';
        var programStatus = '[[${programStatus}]]';
        var programName = '[[${programName}]]';
        var companyCode = '[[${companyCode}]]';

        $(function() {
            //初始化时间选择
            initDatePicker();

        })

        function initDatePicker() {
            flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文
            flatpickr(".fp-time", {
                // 否启用时间选择
                enableTime: true,
                // 选择器中是否可以选择秒
                enableSeconds: true,
                time_24hr: true,
                dateFormat: 'Y/m/d H:i:S'
            });
        }

        function isBlank(param) {
            if (null == param) {
                return true;
            }
            if ('' === param) {
                return true;
            }
            return undefined === param;
        }

        /**
         * 拼接请求参数
         * @param pageNum
         * @param pageIndex
         */
        function createQueryParam(pageIndex, pageSize) {
            var param = '';
            if (!isBlank(pageSize)) {
                param += "&pageSize=" + pageSize;
            }
            if (!isBlank(pageIndex)) {
                param += "&pageNum=" + pageIndex;
            }
            if (!isBlank(programStatus)) {
                param += "&programStatus=" + programStatus;
            }
            if (!isBlank(programName)) {
                param += "&programName=" + programName;
            }
            if (!isBlank(companyCode)) {
                param += "&companyCode=" + companyCode;
            }
            if (!isBlank(startTime)) {
                param += "&startTime=" + startTime;
            }
            if (!isBlank(endTime)) {
                param += "&endTime=" + endTime;
            }
            if (!isBlank(param)) {
                param = param.substring(1);
            }
            return param;
        }

        //导出excel
        $('#exportCkProgram').click(function() {
            var url = context + "/ckProgram/exportCkProgram";
            var paramStr = createQueryParam(null, null);
            if (paramStr !== "") {
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        });

        // 加载select联动内容
        $('[name="searchType"] option').each(function(index, element) {
            if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
                $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
            }
        })

        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        // 后台渲染分页 - 补全url参数(后台传参可以忽略)
        $(".z-page a").each(function() {
            $(this).attr("href", $(this).attr("href") + location.search)
        });

        // 获取表格中选择的ID
        function getSelecteId() {
            let temp = [];
            $('tbody [type="checkbox"]').each(function(index, element) {
                if (element.checked == true) {
                    temp.push($(this).parents('tr,.tr').data('id'));
                }
            })

            return temp.join(',');
        }

        var pagination = new Pagination(".pagination", {
            pageIndex: pageNum, // 当前页数
            pageSize: pageSize, // 每页数量
            count: total, // 总条数
            maxButtonCount: 5, // 分页按钮数量(可选)
            // 分页切换事件
            onPageChanged: function(pageIndex) {
                var param = createQueryParam(pageIndex, pageSize);
                window.location.href = context + "/ckProgram/listByPage" + !isBlank(param) ? "?" + param : "";
            }
        })
    </script>
</body>

</html>